import React, { ReactElement, ReactNode, useState } from 'react'
import { Rate } from 'antd';
import { connect } from 'umi'

interface Props {
    children?: ReactNode,
    type?: string,
    changeHeroInfo: Function
}


function Index({ children, type, changeHeroInfo }: Props): ReactElement {
    const [value, setValue] = useState(0)

    const handleChange = (value: number) => {
        setValue(value)
        console.log(value)
        changeHeroInfo('scores', type, value)
    };
    return (
        <span>
            <Rate onChange={handleChange} count = { 10 } value={value} />
            {value ? <span className="ant-rate-text">{ value }</span> : ''}
        </span>
    )
}

export default connect(() => {
    return {

    }
}, (dispatch) => {
    return {
        changeHeroInfo(classify: string, coms: string, value: string) {
            dispatch({ type: "hero/changeHeroInfo", classify, coms, value })
        }
    }
})(Index)
